<script setup>
import {ref} from 'vue'

const props = defineProps({
  isbn: {type: String, default: ''},
  params: {type: Array, default: () => []},
})

const getParamNameStr = () => {
  let paramNameStr = ''
  for (let i = 0; i < props.params.length; i++) {
    paramNameStr += props.params[i].name
    if (i === props.params.length - 1) break
    paramNameStr += '、'
  }
  return paramNameStr
}

// 参数面板
const floatPanelVisible = ref(false)
const anchors = ref([window.innerHeight * 0.3, window.innerHeight * 0.5, window.innerHeight * 0.8])
const onOpenPanel = () => {
  floatPanelVisible.value = true
}
const onClosePanel = () => {
  floatPanelVisible.value = false
}
</script>

<template>
  <div class="product-params mt-2 ml-1 mr-1 rounded-lg overflow-hidden">
    <van-cell-group>
      <van-cell title="ISBN" :value="isbn"/>
      <van-cell title="参数" @click="onOpenPanel" is-link :label="getParamNameStr()">
        <template #icon>
          <!--<span class="iconfont icon-31chanpincanshu "></span>-->
        </template>
      </van-cell>
    </van-cell-group>
    <van-overlay :show="floatPanelVisible" @click="onClosePanel" />
    <van-floating-panel
        :content-draggable="true"
        :anchors="anchors"
        v-show="floatPanelVisible"
    >
      <div class="p-4 dark:text-gray-100 flex-center">商品参数</div>
      <van-cell-group>
        <van-cell v-for="param in params" :title="param?.name" :label="param?.val" />
      </van-cell-group>
    </van-floating-panel>
  </div>
</template>

<style scoped lang="scss">

</style>